import 'package:aero_frisbee/app/model/af_create_post_param_model/af_create_post_param_model.dart';
import 'package:aero_frisbee/gen/assets.gen.dart';
import 'package:aero_frisbee/pages/modues/post/af_create_post/view_model/af_create_post_view_model.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class AfMinePostsCell extends ConsumerWidget {
  const AfMinePostsCell(this.item, {super.key});
  final AfCreatePostParamModel item;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: const Color(0xffCCCCCC),
          width: 0.5,
        ),
      ),
      child: Column(
        children: [
          ClipRRect(
            borderRadius: BorderRadius.circular(8),
            child: Stack(children: [
              AspectRatio(
                aspectRatio: 162 / 177,
                child: Image.asset(
                  item.imgs.first,
                  fit: BoxFit.cover,
                ),
              ),
              Positioned(
                top: 0,
                right: 0,
                child: GestureDetector(
                  behavior: HitTestBehavior.opaque,
                  onTap: () {
                    ref
                        .read(afMyCreatedPostsListServiceProvider.notifier)
                        .deletePost(item);
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      color: const Color(0xff000000).withOpacity(0.3),
                      borderRadius: const BorderRadius.only(
                        bottomLeft: Radius.circular(8),
                      ),
                    ),
                    padding: const EdgeInsets.symmetric(
                      horizontal: 6,
                      vertical: 4,
                    ),
                    child: Assets.icons.iconDelete.svg(
                      width: 12,
                    ),
                  ),
                ),
              )
            ]),
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 10, right: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Row(
                    children: [
                      Expanded(
                        child: Text(
                          item.title,
                          style: const TextStyle(
                            color: Color(0xff141414),
                            fontWeight: FontWeight.normal,
                            fontSize: 14,
                          ),
                          textAlign: TextAlign.left,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                        ),
                      )
                    ],
                  ),
                  const SizedBox(
                    height: 5,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Flexible(
                        child: Row(
                          children: [
                            SizedBox(
                              height: 20,
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(10),
                                child: AspectRatio(
                                  aspectRatio: 1,
                                  child: CachedNetworkImage(
                                    imageUrl:
                                        item.userInfo?.avatarThumbUrl ?? '',
                                    fit: BoxFit.fill,
                                    placeholder: (context, url) =>
                                        const Material(
                                      color: Color(0xffF2F5F9),
                                      child: Center(
                                        child: SizedBox(
                                          width: 25,
                                          height: 25,
                                          child: CircularProgressIndicator(
                                            strokeWidth: 2,
                                            color: Color(0xffADADAD),
                                            backgroundColor: Colors.white,
                                          ),
                                        ),
                                      ),
                                    ),
                                    errorWidget: (context, url, error) =>
                                        const CircularProgressIndicator(
                                      strokeWidth: 2,
                                      color: Color(0xffADADAD),
                                      backgroundColor: Colors.white,
                                    ),
                                  ),
                                ),
                              ),
                            ),
                            Flexible(
                              child: Padding(
                                padding:
                                    const EdgeInsets.symmetric(horizontal: 5),
                                child: Text(
                                  item.userInfo?.nickname ?? '',
                                  style: const TextStyle(
                                    color: Color(0xff404040),
                                    fontWeight: FontWeight.normal,
                                    fontSize: 10,
                                  ),
                                  textAlign: TextAlign.center,
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 1,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: () {
                          ref
                              .read(
                                  afMyCreatedPostsListServiceProvider.notifier)
                              .toggleLike(item);
                        },
                        child: item.isLike
                            ? Assets.icons.iconLikeLight.image(width: 18)
                            : Assets.icons.iconLikeGray.image(width: 18),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}
